<template>
    <div class="navigation" ref="navigation">
      <div class="common-layout">
          <el-container>
          <!-- 左侧logo展示 -->
          <el-aside width="20vmax" class="left-logo" v-if="!logoshow">
              <img style="width: 15vmin;height: 15vmin;" src="@/assets/logo.png" alt="logo" />
              <p>众筹平台</p>
          </el-aside>
          <!-- 中间搜索框 -->
          <el-main :class="{'fixed-main': isFixed}">
              <input type="text" v-model="searchQuery" placeholder="搜索项目" class="el-input" @keydown.enter="handleEnterPress" />
          </el-main>
          <!-- 右侧菜单按钮切换视图 -->
          <el-aside class="right-menu" width="30vmax" :class="{'fixed-right-menu': isFixed}">
              <el-tooltip content="首页" placement="bottom" effect="light">
                  <router-link to="/home" class="routeritem"><el-icon size="5vmin"><House /></el-icon></router-link>
              </el-tooltip>
              <el-tooltip content="编辑" placement="bottom" effect="light">
                  <router-link to="/editor" class="routeritem"><el-icon size="5vmin"><Edit /></el-icon></router-link>
              </el-tooltip>
              <el-tooltip content="项目列表" placement="bottom" effect="light">
                  <router-link to="/project" class="routeritem"><el-icon size="5vmin"><Collection /></el-icon></router-link>
              </el-tooltip>
              <el-tooltip content="个人中心" placement="bottom" effect="light">
                  <router-link to="/center" class="routeritem"><el-avatar :size="60" :src="avatarsrc" /></router-link>
              </el-tooltip>
          </el-aside>
        </el-container>
    </div>
</div>
</template>
  
<script setup>
import AxiosMethods from '@/util/AxiosMethods';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';  // 引入 useRouter
import { ElMessage } from 'element-plus';  // 引入 Element UI 的 Message 组件

const store = useStore();
const avatarsrc = ref(store.state.User.user.userimage); 
const isFixed = ref(false);
const router = useRouter();  
const searchQuery = ref('');

const handleEnterPress = async () => {
    if (!searchQuery.value.trim()) {  // 判断输入框是否为空
        ElMessage.error('搜索不能为空');  // 弹出错误信息
    } else {
        try {
            // 跳转到项目列表页面并传递搜索查询参数
            router.push({ path: '/search', query: { query: searchQuery.value } });
        } catch (error) {
            ElMessage.error('搜索失败，请稍后再试');
        }
    }
};
// 监听路由变化，路由变化一次调用一次 getUserHome
watch(router.currentRoute, () => {
    getUserHome();
});
// 获取用户 uid
const getUserHome = async () => {
    if (!JSON.parse(localStorage.getItem('User'))) {
        return;
    }
    const token = JSON.parse(localStorage.getItem('User')).confirm || '';
    try {
        const res = await AxiosMethods.get('user/home', { headers: { token: token } })
        if (res.data.code === 1) {
            let myuser = JSON.parse(localStorage.getItem('User'));
            myuser.userid = res.data.data.uid;
            myuser.userimage = res.data.data.avatar || avatarsrc.value; // 默认头像
            localStorage.setItem('User', JSON.stringify(myuser))
            avatarsrc.value = myuser.userimage; // 更新 avatarsrc
        } else {
            console.log("获取用户 uid 失败:" + res.data.msg);
            avatarsrc.value = JSON.parse(localStorage.getItem('User')).userimage; // 保留原头像
        }
    } catch (err) {
        console.log("获取用户 uid 失败:" + err);
    }
};
</script>

  
<style scoped>
.navigation {
height: 17vmin;
background-image: url('@/assets/topback.png');
}
.el-main {
    display: flex;
    justify-content: right;
    align-items: flex-start;
}
.routeritem {
    margin: 2vmin;
}
.right-menu a.router-link-active {
    color: #409eff;
    border-bottom: 4px solid #409eff;
    padding-bottom: 3px;
}
.right-menu a:hover {
    color: #409eff;
}
.left-logo {
    padding-left: 10vmin;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-logo p{
    font-size: 2.5vmin;
}
.right-menu {
    padding-left: 10vmin;
    padding-top: 2vmin;
}
.el-input {
    width: 80%;
    margin-top: 2vmin;
}
</style>